<template>
  <view class="help-apply">
    <view class="box-top"> </view>
    <view class="help-total">
      <view class="box-t border-b solid solid-r" style="padding-right: 24rpx">
        <view class="mon">{{ total.count || 0 }}人</view>
        <view class="flex-box">
          <image class="people" src="../../static/icon/people.png"></image>
          <view class="tip">累计服务人数</view>
        </view>
      </view>
      <view class="box-t border-b solid">
        <view class="mon">{{ total.insuredCount || 0 }}人</view>
        <view class="flex-box">
          <image class="people" src="../../static/icon/people.png"></image>
          <view class="tip">累计保障人数</view>
        </view>
      </view>
      <!-- <view class="box-t solid-r" style="padding-right: 24rpx">
        <view class="mon">{{ total.donationCount || 0 }}人</view>
        <view class="flex-box">
          <image class="people" src="../../static/icon/people.png"></image>
          <view class="tip">捐助人数</view>
        </view>
      </view>
      <view class="box-t">
        <view class="mon">{{ total.donationAmount | money }}</view>
        <view class="flex-box">
          <image class="people" src="../../static/icon/money.png"></image>
          <view class="tip">募集善款</view>
        </view>
      </view> -->
    </view>

    <view v-if="story.length" class="box">
      <view class="title">受益人故事 <text class="ob">已收到87封感谢信</text></view>
      <view class="activity-list">
        <view v-for="(item, key) in story" :key="key" class="info" @click="goStory(item)">
          <view class="icon">
            <image class="icon-img-1" :src="item.imgs"></image>
          </view>
          <view class="child-t">{{ item.title }}</view>
          <view class="address">
            <image class="position-icon" src="../../static/icon/position.png"></image>
            <text>{{ item.remark }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="history.length" class="box">
      <view class="title">捐助动态</view>
      <view v-for="(item, index) in history" :key="index" class="donations-list">
        <image class="praise-icon" src="../../static/icon/praise.png"></image>
        <view>
          <text class="name">{{ item.patientName | hidden }}</text>
          捐款
          <text class="money">{{ item.money }}</text>
          元
          <text class="add">{{ item.location }}</text>
          <text class="time">{{ item.createDate }}</text>
        </view>
      </view>
    </view>

    <view v-if="statistics.length" class="box">
      <view class="title">会员慢病状态统计</view>
      <view v-for="item in statistics" :key="item.diseaseName" class="help-count">
        <!-- <view class="count-icon" :style="{ backgroundImage: url(item.icon) }"></view> -->
        <view
          class="count-icon"
          :style="{
            background: `url(${item.icon}) no-repeat`,
            backgroundSize: '48rpx 48rpx',
            backgroundPosition: 'center',
            backgroundColor: '#fdf2f1'
          }"
        ></view>
        <view class="right">
          <view>
            {{ item.diseaseName }} <text class="num">{{ item.count }}%</text>
          </view>
          <view class="progress" :style="{ '--after': item.count + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- <view class="box">
      <view class="title">解读捐献</view>
      <view class="explain">
        捐献是保障参与万户健康项目的所有会员能够长期稳定享受资助的重要渠道,是除了来自爱尔基金拨款之外的重要辅助手段。的故事的归属感色弱各色各深入骨髓光荣时代如果是的如果是的如果是的如果是的如果的故事的归属感色弱各色各深。
      </view>
      <view>
        <view class="help-tip"><text class="icon">?</text>如何救助他人？</view>
      </view>
      <view>
        <view class="help-tip"><text class="icon">?</text>如何救助他人？如何救助他人？</view>
      </view>
    </view> -->
  </view>
</template>

<script>
// import { disclosure, publicBenefitDonationHistory, getArticles } from '@/api/welfare';
import { disclosure } from '@/api/welfare';

export default {
  filters: {
    money: function (m) {
      if (isNaN(m)) return 0;
      if (m < 100000) {
        return m;
      } else {
        return (m / 10000).toFixed(2) + '万元';
      }
    },
    hidden: function (name) {
      if (!name) return '';
      let newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + '*';
      } else if (name.length > 2) {
        let char = '';
        for (let i = 0, len = name.length - 2; i < len; i++) {
          char += '*';
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }

      return newStr;
    }
  },
  data() {
    return {
      total: {},
      history: [],
      story: [],
      gaoxueya: require('@/static/icon/gaoxueya.png'),
      guanxinbing: require('@/static/icon/guanxinbing.png'),
      tangniaobing: require('@/static/icon/tangniaobing.png'),
      gaozhixue: require('@/static/icon/gaozhixue.png'),
      naozuzhong: require('@/static/icon/naozuzhong.png'),
      manzufei: require('@/static/icon/manzufei.png')
    };
  },

  onLoad() {
    this.init();
  },

  computed: {
    statistics() {
      if (!this.total.assistStat) return [];
      const icon = {
        高血压: this.gaoxueya,
        冠心病: this.guanxinbing,
        糖尿病: this.tangniaobing,
        高脂血症: this.gaozhixue,
        脑卒中: this.naozuzhong,
        慢阻肺: this.manzufei
      };
      // const icon = {
      //   高血压: '../../static//icon/gaoxueya.png',
      //   冠心病: this.guanxinbing,
      //   糖尿病: this.tangniaobing,
      //   高脂血症: this.gaozhixue,
      //   脑卒中: this.naozuzhong,
      //   慢阻肺: this.manzufei
      // };
      const statistics = this.total.assistStat.map((item) => {
        item.icon = icon[item.diseaseName];
        return item;
      });
      return statistics || [];
    }
  },

  methods: {
    async init() {
      // const id = this.$store.state.join.patientid;
      const r1 = disclosure(); // 公示统计
      // 捐助历史
      // const r2 = publicBenefitDonationHistory({
      //   // patientId: id,
      //   skip: 0,
      //   limit: 3
      // });
      // 受益人故事
      // const r3 = getArticles({
      //   where: JSON.stringify({ articleCategory: '故事', articleCategoryRange: 1 }),
      //   limit: 2
      // });
      const [d1] = await Promise.all([r1]);
      this.total = d1.data;
      // this.history = d2.data;
      // this.story = d3.data;
    },

    // 去往故事详情
    async goStory(item) {
      if (!item.id) return;
      this.$wxPromise.navigateTo({
        url: '/pages/article/index?id=' + item.id
      });
    }
  }
};
</script>

<style lang="scss">
.help-apply {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .box-top {
    background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
    height: 160rpx;
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 0;
  }
  // .solid::after {
  //   position: absolute;
  //   content: '';
  //   width: 100%;
  //   left: 0;
  //   bottom: 0;
  //   height: 1px;
  //   background-color: #e3e5e9;
  //   transform: scale(1, 0.5);
  //   transform-origin: center bottom;
  // }
  .solid-r::before {
    position: absolute;
    content: '';
    width: 1px;
    top: -50%;
    right: 0;
    height: 200%;
    background-color: #e3e5e9;
    -webkit-transform: scale(1, 0.5);
    transform: scale(0.5);
  }
  .help-total {
    margin: 24rpx;
    padding: 40rpx 24rpx;
    height: 180rpx;
    border-radius: 24rpx;
    background: #ffffff;
    box-sizing: border-box;
    margin-top: 60rpx;
    .box-t {
      float: left;
      width: 50%;
      box-sizing: border-box;
      height: 140rpx;
      padding-top: 24rpx;
      position: relative;
    }
    .box-t:nth-child(even) {
      padding-left: 24rpx;
    }
    .border-b {
      padding-top: 0;
      padding-bottom: 26rpx;
    }
    .people {
      width: 32rpx;
      height: 32rpx;
    }
    .mon {
      text-align: center;
      font-size: 40rpx;
      color: #000000;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tip {
      font-size: 24rpx;
      color: #9b9b9b;
    }
    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .box {
    border-radius: 24rpx;
    background: #ffffff;
    margin: 24rpx;
    padding: 40rpx 24rpx;
    box-sizing: border-box;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 24rpx;
    }
    .ob {
      font-size: 24rpx;
      color: #2680eb;
      font-weight: 400;
      float: right;
      line-height: 2em;
    }
  }
  .activity-list {
    display: flex;
    justify-content: space-between;
    .info {
      width: 316rpx;
    }
    .icon {
      width: 100%;
      height: 240rpx;
      background: #ffe1de;
      border-radius: 16rpx;
      text-align: center;
      position: relative;
    }
    .bg2 {
      background: #e7edfe;
    }
    .child-t {
      font-size: 32rpx;
      // font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      margin: 24rpx 0 30rpx;
    }
    .icon-img-1,
    .icon-img-2 {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      left: 0;
      right: 0;
    }
    .icon-img-1 {
      width: 224rpx;
      height: 176rpx;
    }
    .icon-img-2 {
      width: 288rpx;
      height: 218rpx;
    }
    .address {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
    }
    .position-icon {
      width: 22rpx;
      height: 22rpx;
      margin-right: 8rpx;
    }
  }
  .donations-list {
    border-radius: 30rpx;
    background: rgba(252, 230, 229, 0.51);
    padding: 8rpx 24rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    margin-top: 16rpx;
    .name {
      margin-right: 16rpx;
    }
    .money {
      font-weight: bold;
    }
    .add,
    .time {
      color: rgba(0, 0, 0, 0.3);
      font-size: 24rpx;
    }
    .add {
      margin: 0 24rpx;
    }
  }
  .praise-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }
  .help-count {
    display: flex;
    margin-top: 48rpx;
    .right {
      flex: 1;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
    }
    .num {
      font-size: 24rpx;
      color: #f34e1c;
      float: right;
      line-height: 2em;
    }
    .progress {
      height: 16rpx;
      width: 100%;
      background: #f3f3f3;
      margin-top: 14rpx;
      position: relative;
    }
    .progress::after {
      content: ' ';
      width: var(--after);
      background: #f34e1c;
      height: 16rpx;
      display: block;
    }
    .count-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
      background-size: 48rpx 48rpx;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(253, 242, 241, 1);
      margin-right: 24rpx;
    }
  }
  .explain {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.55);
  }
  .help-tip {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 20rpx;
    display: inline-block;
    background: #e9f2fd;
    padding: 10rpx 26rpx;
    border-radius: 8rpx;
    color: #2680eb;
    .icon {
      border-radius: 50%;
      border: 1px solid #2680eb;
      display: inline-block;
      width: 26rpx;
      height: 26rpx;
      line-height: 28rpx;
      text-align: center;
      font-size: 24rpx;
      margin-right: 8rpx;
      vertical-align: middle;
    }
  }
}
</style>
